<div nz-row class="container">
    <div class="search-box">
        <nz-card [nzBordered]="false">
            <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
                <nz-form-item>
                    <nz-form-label>关键词</nz-form-label>
                    <nz-form-control>
                        <input formControlName="manageName" nz-input placeholder="关键词" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <button nz-button nzType="primary" (click)="getGridData(true)"><i nz-icon nzType="search"></i>搜索
                        </button>
                        <button nz-button nzType="danger" (click)="openEditModal()" style="margin-left: 10px"><i nz-icon
                                nzType="plus" nzTheme="outline"></i>新增
                        </button>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label>近期搜索</nz-form-label>
                    <nz-form-control>
                        <ng-container *ngIf="!latestList.length">
                            <span>暂无记录</span>
                        </ng-container>
                        <ng-container *ngIf="latestList.length">
                            <a *ngFor="let item of latestList" class="latest-item"
                                (click)="getLatestData(item)">{{item.keyword}}</a>
                        </ng-container>
                    </nz-form-control>
                </nz-form-item>
            </form>

        </nz-card>
    </div>
    <div nz-col class="main-panel">
        <div class="gutter-box">

            <nz-card [nzBordered]="false" class="main-grid-card" [nzTitle]="props.name" style="margin-top: 10px">
                <nz-table #dataTable nzBordered nzShowSizeChanger [nzData]="tableData" nzSize="middle"
                    [nzFrontPagination]="false" [nzLoading]="loading" [nzTotal]="total" [(nzPageIndex)]="pageNum"
                    [(nzPageSize)]="pageSize" (nzPageIndexChange)="getGridData()"
                    (nzPageSizeChange)="getGridData(true)">
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>编码</th>
                            <th>所在市县名称</th>
                            <th>成立年代</th>
                            <th>灌区面积（万亩）</th>
                            <th>干渠长度（km）</th>
                            <th>最大引水能力（m³/s）</th>
                            <th>年平均引水能力（亿m³）</th>
                            <th>受益市县11</th>
                            <th style="width: 75px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let row of dataTable.data">
                            <td>{{ row.manageName }}</td>
                            <td>{{ row.manageCode }}</td>
                            <td>{{ row.county }}</td>
                            <td>{{ row.year }}</td>
                            <td>{{ row.irrigatedArea }}</td>
                            <td>{{ row.canalLength }}</td>
                            <td>{{ row.maxWaterDiversionCapacity }}</td>
                            <td>{{ row.annulWaterDiversionCapacity }}</td>
                            <td>{{ row.benefitDistrict }}</td>
                            <td>
                                <i nz-icon nzType="edit" nzTheme="outline" (click)="openEditModal(row)"></i>
                                <a nz-popconfirm nzPopconfirmTitle="确认删除该条记录吗？" nzPopconfirmPlacement="left"
                                    (nzOnConfirm)="onDelete(row.id)">
                                    <i nz-icon nzType="delete" nzTheme="outline"></i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </nz-card>
        </div>
        <div nz-col class="right-panel gutter-row">
            <div class="gutter-box">
                <nz-card [nzBordered]="false">
                    <app-statistics [statOpt]="statOpt"></app-statistics>
                </nz-card>
            </div>
        </div>
    </div>

</div>

<nz-modal nzClassName="custom-modal" nzWidth="950" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
    (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
    <form nz-form [formGroup]="detailForm" class="form-content">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>名称</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="名称" formControlName="manageName">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>编码</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="编码" formControlName="manageCode">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>所在市县</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="所在市县" formControlName="county">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>成立年代</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="成立年代" formControlName="year">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>灌溉面积</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="灌溉面积" formControlName="irrigatedArea">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>干渠长度</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="干渠长度" formControlName="canalLength">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>最大引水能力</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="最大引水能力" formControlName="maxWaterDiversionCapacity">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>年平均引水能力</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="年平均引水能力" formControlName="annulWaterDiversionCapacity">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>受益市县</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="受益市县" formControlName="benefitDistrict">
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
    </form>
</nz-modal>
